<template>
	<scroll-view style="height: 100%;" scroll-y="true">
		<view v-if="loading" class="header">
			<view style="width: 80rpx;height: 80rpx;border-radius:100% ;" class="Skeleton"></view>
			<view style="height: 40rpx;width: 300rpx;" class="Skeleton" />
			<view style="height: 40rpx;width: 100rpx;border: none;" class="Skeleton" />
		</view>
		<view class="header" v-else>
			<imageUpload :imageUrl='logo' page='home' v-if="token" @changeImageList='changeImageList' />
			<view class="shopIcon" v-else @click='login'>
				<u-icon name="shopping-cart" color="#fff" size='38rpx'></u-icon>
			</view>
			<view v-if="token">
				<u--text :text="shop.name" :lines="1"></u--text>
				<view>
					<text>有效期至{{shop.expired_at }}</text>
					<text class="is_expired" v-if="shop.is_expired">暂未订购服务</text>
					<text class="is_expired" v-if="shop.is_trial_version">试用期</text>
				</view>
			</view>

			<view v-else>
				<u--text text="登录可管理店铺" :lines="1" @click='login'></u--text>
			</view>
		</view>
		<view class="ShopDataBox">
			<view class="title">
				常用功能
			</view>
			<u-grid :border="false" col='4' @click="clickGrid">
				<u-grid-item v-for="(item,index) in iconData" :key="index">
					<view style="height: 20rpx;" />
					<u-icon size='60rpx' :name="item.icon" :label="item.title" labelPos='bottom' labelSize="30rpx"
						labelColor='#333'></u-icon>
				</u-grid-item>
			</u-grid>
		</view>
	</scroll-view>
</template>

<script>
	import imageUpload from '@/components_company/imageUpload.vue'
	export default {
		components: {
			imageUpload,
		},
		props: ['shop', 'loading'],
		data() {
			return {
				token: uni.getStorageSync('token'),
				logo: [{
					upload: true,
					id: this.shop.logo,
					url: this.shop.logo,
					coverUrl: this.shop.logo,
				}],
				iconData: [{
						icon: 'bookmark',
						title: '工地'
					}, {
						icon: 'bookmark',
						title: '流程'
					}, {
						icon: 'bookmark',
						title: '员工'
					}, {
						icon: 'bookmark',
						title: '角色'
					},  {
						icon: 'bookmark',
						title: '风格'
					}, {
						icon: 'bookmark',
						title: '图片'
					}, {
						icon: 'bookmark',
						title: '浏览用户'
					},
					{
						icon: 'bookmark',
						title: '摄像头'
					},
				],
			}
		},
		watch: {
			shop() {
				this.logo = [{
					upload: true,
					id: this.shop.logo,
					url: this.shop.logo,
					coverUrl: this.shop.logo,
				}]
			}
		},
		mounted() {
		},
		methods: {
			changeImageList(e) {
				if (e.length) {
					this.logo = e
				}
				uni.$u.toast('更新logo成功')
				this.$api_company.Shop.Update({
					...this.shop,
					logo: this.logo[0].url
				})
			},
			login() {
				uni.reLaunch({
					url: '/login/index'
				})

			},
			clickGrid(e) {
				if (e == 0) {
					this.$utils.navigateTo({
						url: '/customer_company/index'
					})
				} else if (e == 2) {
					this.$utils.navigateTo({
						url: '/administrator/index'
					})
				}else if (e == 3) {
					this.$utils.navigateTo({
						url: '/administrator_role/list'
					})
				} else if (e == 4) {
					this.$utils.navigateTo({
						url: '/style/list'
					})
				} else if (e == 5) {
					this.$utils.navigateTo({
						url: '/image/list'
					})
				} else if (e == 1) {
					this.$utils.navigateTo({
						url: '/process/list'
					})
				} else if (e == 6) {
					this.$utils.navigateTo({
						url: '/user/list'
					})
				} else if (e == 7) {
					this.$utils.navigateTo({
						url: '/camera/index'
					})
				} 
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		height: 10%;
		display: flex;
		align-items: center;
		width: 94vw;
		margin: 20rpx auto;

		>view:nth-child(2) {
			flex: 1;
			display: flex;
			flex-direction: column;
			height: 80rpx;
			margin-left: 20rpx;
		}

	}

	.ShopDataBox {
		min-height: 30%;
		width: 98%;
		border-radius: 8rpx;
		box-shadow: 0 0 10rpx #ddd;
		background-color: #fff;
		padding: 20rpx 40rpx;
		box-sizing: border-box;

		width: 94vw;
		margin: 20rpx auto;

		.title {
			font-size: 34rpx;
		}

		.size13 {
			font-size: 26rpx;
		}
	}

	.shopIcon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80rpx;
		height: 80rpx;
		border-radius: 100%;
		background-color: #3975c6;
	}

	.is_expired {
		font-size: 24rpx;
		cursor: pointer;
		color: red;
	}
</style>